<template>
  <scroller class="scroller"
            :show-scrollbar="false">
    <div class="user-header">
      <image class="user-bg-img"
             src="bmlocal://assets/user/common_img_bg_01.png"></image>
      <image class="user-head-img"
             :src="userImage"
             @click="goInfo()"></image>
      <text class="user-auth"
            :class="[isAuth === 1 ? 'user-auth-active' : '']">{{isAuth === 1 ? '已实名' : '未实名'}}</text>
      <text class="user-name"
            @click="goInfo()">{{userName}}</text>
    </div>

    <div class="bg-white flex-row p-1 mb-3">
      <div class="flex text-center"
           v-for="(item, index) in mainNavs"
           :key="index"
           @click="goPage(item.page)">
        <image class="icon-bg"
               :src="item.icon"></image>
        <text>{{item.title}}</text>
      </div>
    </div>

    <vm-cell :has-arrow="true"
             v-for="(nav, index) in navs"
             :hasTopBorder="index===0"
             :key="nav.page"
             :show-title="false"
             @cellClicked="clickCell(nav)">
      <div class="cell-item"
           title-align="left">
        <image class="icon-sm"
               :src="`bmlocal://assets/user/${nav.icon}`"></image>
        <text>{{nav.title}}</text>
      </div>
    </vm-cell>

  </scroller>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmCell from '../../components/vm-cell.vue'
import {
  STORAGE_USER,
  EVENT_GET_USER
} from '../../plugins/constant'

const globalEvent = weex.requireModule('globalEvent')

export default {
  components: {
    VmButton,
    VmCell
  },
  props: {},
  data() {
    return {
      user: {},
      navs: [
        { page: 'farm.cooperate', title: '我的客户', icon: 'user_icon_my_follow.png' },
        { page: 'user.message', title: '我的消息', icon: 'user_icon_my_message.png' },
        { page: 'user.qrcode', title: '农场二维码', icon: 'user_icon_farm_qr.png' },
        { page: 'user.help', title: '帮助中心', icon: 'user_icon_help.png' },
        { page: 'user.version', title: '版本更新', icon: 'user_icon_version_update.png' },
        { page: 'user.setting', title: '设置', icon: 'user_icon_setting.png' }
      ],
      mainNavs: [
        // {
        //   title: '云记账',
        //   page: 'account.index',
        //   icon: 'bmlocal://assets/user/user_icon_my_credit.png'
        // },
        {
          title: '金融',
          page: 'credit.index',
          icon: 'bmlocal://assets/user/user_icon_my_credit.png'
        },
        {
          title: '我的服务',
          page: 'serve.index',
          icon: 'bmlocal://assets/user/user_icon_my_merchant.png'
        }
      ],
      homeBackClickTime: +new Date()
    }
  },
  computed: {
    userName() {
      return this.user.realName || this.user.userName || ''
    },
    userImage() {
      return this.user.headImg || 'bmlocal://assets/user/common_img_default_head.png'
    },
    isAuth() {
      return +this.user.isAuth || 0
    }
  },
  watch: {},
  created() {
    this.$event.on(EVENT_GET_USER, res => this.user = res)
    this.getUser()
    this.androidFinishApp()
  },
  eros: {
    beforeBackAppear(params) {
      if (params && params.type === 1) {
        this.getUserRemote()
      }
    }
  },
  methods: {
    androidFinishApp() {
      globalEvent.addEventListener('homeBack', options => {
        const timeNow = new Date().getTime()
        if (timeNow - this.homeBackClickTime > 2000) {
          this.$notice.toast({ message: '再按一次退出应用' })
          this.homeBackClickTime = timeNow
        } else {
          this.$router.finish()
        }
      })
    },
    getUser() {
      const user = this.$storage.getSync(STORAGE_USER)
      if (!user) { return }
      this.user = user
    },
    getUserRemote() {
      this.$http({
        method: 'GET',
        name: 'auth.me'
      }).then(res => {
        this.user = res
        this.$storage.setSync(STORAGE_USER, res)
      })
    },
    goInfo() {
      this.$nav.open({ name: 'user.info' })
    },
    clickCell(nav) {
      this.goPage(nav.page)
    },
    goPage(name) {
      this.$nav.open({ name })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.bg-white {
  background-color: #fff;
}
.flex-row {
  flex-direction: row;
}
.p-3 {
  padding: 30px;
}
.p-2 {
  padding: 20px;
}
.p-1 {
  padding: 10px;
}
.mb-3 {
  margin-bottom: 30px;
}
.flex {
  flex: 1;
}
.text-center {
  text-align: center;
  align-items: center;
}

.scroller {
  width: 750px;
}
.user-header {
  width: 750px;
  height: 260px;
  padding-top: 18px;
  align-items: center;
}
.user-auth {
  background-color: $gray-300;
  font-size: 20px;
  margin-top: -30px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  color: $gray-500;
  border-width: 1px;
  border-color: $gray-400;
}
.user-auth-active {
  background-color: $accent-light;
  border-color: $accent;
  color: $accent-dark;
}
.user-bg-img {
  width: 750px;
  height: 340px;
  position: absolute;
  top: 0;
  left: 0;
}
.user-head-img {
  width: 160px;
  height: 160px;
  border-radius: 80px;
  margin-bottom: 15px;
  border-style: solid;
  border-width: 6px;
  border-color: rgba(255, 255, 255, 0.5);
}
.user-name {
  color: #fff;
}
.container {
  width: 750px;
  align-items: center;
}

.cell-item {
  flex-direction: row;
  flex: 1;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.icon-bg {
  width: 100px;
  height: 100px;
  margin-bottom: 5px;
}
.icon-sm {
  width: 46px;
  height: 46px;
  margin-right: 20px;
}
</style>
